<template>
  <div>
    <el-table
      ref="countryChoseRef"
      :data="tableData"
      row-key="name"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="height: calc(100vh - 100px)"
      @cell-click="expandChange"
    >
    <el-table-column label="ID" prop="id" />
      <el-table-column label="名称" prop="description" />
      <el-table-column label="英文名" prop="name" align="center" />
      <el-table-column label="代码" align="center" prop="code" />
      <el-table-column label="类型" align="center" prop="typeName" />
      <el-table-column label="旗帜" align="center">
        <template #default="scope">
          <ImagePreview
            :src="scope.row.image"
            height="50px"
            width="50px"
          ></ImagePreview>
        </template>
      </el-table-column>
    </el-table>

    <CountryEdit
      :item="publicItem"
      :showCountry="showCountry"
      @handleSure="handleSure"
      @handleClose="handleClose"
      :distinction="distinction"
    ></CountryEdit>
  </div>
</template>
  
  <script setup >
import { ref, reactive, onMounted } from "vue";
import CountryEdit from "./components/countryEdit.vue";
const { proxy } = getCurrentInstance();
const tableData = ref([]); // 当前页显示的数据
const showCountry = ref(false); // 是否显示弹出层
const publicItem = ref({}); //公共赋值对象数据]
const publicId = ref({}); //公共赋值id

const distinction = ref(1);

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  param: {},
});
onMounted(() => {
  getList();
});
/** 查询类别管理列表 */
const getList = () => {
  site.country
    .countryList({
      data: queryParams.value,
    })
    .then((res) => {
      tableData.value = res.data;
    });
};
const expandChange = (rowItem, show) => {
  if (rowItem.typeName !== "国家") return;
    site.CountryZone.countryzoneList({
      data: {
        id: rowItem.id,
      },
    }).then((res) => {
      if(res.code!==200) return
      rowItem.children = res.data;
      setTimeout(() => {
        proxy.$refs["countryChoseRef"].toggleRowExpansion(rowItem,true);
      }, 200);
    });
};

const handleClose = () => {
  showCountry.value = false;
};
const handleSure = () => {
  showCountry.value = false;
  getList();
};
const eventsList = reactive([
  {
    name: "添加",
    type: "primary",
  },
  {
    name: "编辑",
    type: "primary",
  },
  {
    name: "删除",
    type: "danger",
  },
]);


</script>